<template>
  <section class="wrapper">
    <myHeader :obj="myObj" @events="events"></myHeader>
    <main>
      <subject class="marginB_10">
        <span slot="title">{{listDate.Title}}</span>
        <span slot="type">一对一约见</span>
        <span slot="money">{{listDate.Money?listDate.Money.toFixed(2):"0"}}</span>
      </subject>
      <myProgress :level="level"></myProgress>
      <myBigIcon :bigpic="this.loginData[1].OpenId==listDate.ExpertOpenId?listDate.HeadUrl:listDate.ExpertHeadUrl"></myBigIcon>
      <div class="orderWrap">
        <div class="orderContent">
          <h2>订单号：{{listDate.AppointmentOrderNo}}</h2>
          <p>订单金额：￥{{listDate.Money}}</p>
          <p>见面地点：{{listDate.Location?listDate.Location:"暂未确定"}}</p>
          <p>创建时间：{{listDate.CreateTime?listDate.CreateTime:"暂未确定"}}</p>
          <p>约见时间：{{listDate.SMeetUpTime?listDate.SMeetUpTime:"暂未确定"}} - {{listDate.EMeetUpTime?listDate.EMeetUpTime:"暂未确定"}}</p>
        </div>
        <div class="orderRemark">
          <span>备注：</span>
          <p>{{listDate.Describe}}</p>
        </div>
      </div>
      <div v-if="!listDate.Enddo">
        <div class="call_0319" @click="changeStatus()">填写信息</div>
        <div class="call_0319" @click="comit">立即沟通</div>
        <myButton class="btnW_0331" @sendDate="creatorder">确认约见</myButton>
        <myButton :type="2" @rejectDate="reject">拒于门外</myButton>
      </div>
      <div v-else>
        <div class="call_0319">订单已关闭</div>
      </div>
      <mt-popup
        v-model="popupVisible"
        position="bottom">
        <myField @clickk="getTime(1)">
          <span slot="key">开始时间</span>
          <span slot="value">{{setTing.startTime}}</span>
        </myField>
        <myField  @clickk="getTime(2)">
          <span slot="key">结束时间</span>
          <span slot="value">{{setTing.endTime}}</span>
        </myField>
        <myField :inputs="true" @changes="changePhone">
          <span slot="key">电话号码</span>
        </myField>
        <myField :inputs="true" @changes="changePosition">
          <span slot="key">约见地点</span>
        </myField>
        <myField :inputs="true" @changes="changeDesc">
          <span slot="key">备注</span>
        </myField>
      </mt-popup>
      <mt-datetime-picker  id="add_0314"
        ref="picker1"
        type="datetime"
        v-model="value1"
        year-format="{value}"
        month-format="{value}"
        date-format="{value}"
        hour-format="{value}"
        minute-format="{value}"
        :startDate="startDate"
        :endDate="endDate"
        @confirm="handleChange_1">
      </mt-datetime-picker>
    </main>
  </section>
</template>
<script>
import myHeader from './base/myHeader';
import myProgress from './base/myProgress';
import myButton from './base/myButton';
import myField from './base/myField';
import myField2 from './base/myField2';
import subject from './base/subject';
import myBigIcon from './base/myBigIcon';
import { DatetimePicker, Popup,Toast } from 'mint-ui';
import hgjSkip from '../assets/js/hgjSkip';
import API from '../assets/js/asktoses';
import { fetch,zdUrl,chatAppId } from '../assets/api';
export default {
  data () {
    return {
      myObj: {
        type: 2,
        text: '约见详情'
      },
      value1: null,
      startDate: new Date(),
      endDate: new Date('2048-12-31'),
      level: 1,
      popupVisible: false,
      checkTime: null,
      setTing: {
        startTime: '',
        endTime: '',
        phone: '',
        position: '',
        desc: ''
      },
      Datelist:{},//返回数据
      loginData:null,
      listDate:{}
    }
  },
  created() {
    hgjSkip.skip().then(res =>{
      this.loginData = res;
      this.experinformation();
    });
  },
  methods: {
    changePhone(i){
      this.setTing.phone = i;
    },
    changePosition(i){
      this.listDate.Location = i;
    },
    changeDesc(i){
      this.setTing.desc = i;
      this.listDate.Describe = this.setTing.desc;
    },
    getTime(i) {
      this.$refs['picker1'].open();
      this.checkTime = i;
      
      
    },
    handleChange_1(value) {
      let year = value.getFullYear();
      let month = value.getMonth()+1;
      let day = value.getDate();
      let hour = value.getHours();
      let min = value.getMinutes()
      if(month <= 9) {
        month = 0+''+month;
      }
      if(day<=9) {
        day = 0+''+day;
      }
      if(this.checkTime == 1){
        this.setTing.startTime = year+'-'+month+'-'+day+' '+hour+':'+min+' ';
      }else if( this.checkTime == 2) {
        this.setTing.endTime = year+'-'+month+'-'+day+' '+hour+':'+min+' ';
      }

      if(this.setTing.startTime){
        this.listDate.SMeetUpTime = this.setTing.startTime;
      }
      if(this.setTing.endTime){
       this. listDate.EMeetUpTime = this.setTing.endTime;
      }
    },
    events(i){
      if (i == 2) {
        history.back();
      }
    },
    changeStatus() {
      this.popupVisible = !this.popupVisible
    },
    //获取行家信息
    async experinformation(){
      const res = await fetch(API.getOrderList,{
        ...this.loginData[1],
        AppointmentOrderNo:this.$route.query.AppointmentOrderNo,
      });
      this.listDate = res.Result;
      //console.log(this.listDate.ExpertIdentifier)
    },
    //跳转到聊天地址
    comit() {
      //跳转到聊天地址
      location.href = `${zdUrl}session?resource=HJ&AppId=${chatAppId}&OpenId=${this.loginData[1].OpenId}&id=${this.listDate.Identifier}&selType=C2C`;
    },
    //确定约见
    async creatorder(){
      if(!this.setTing.startTime){
        Toast("请填写开始时间")
      } else if(!this.setTing.endTime) { 
        Toast("请填写结束时间")
      } else if(!(/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.setTing.phone))) { 
        Toast("电话不对")
      } else if(!this.setTing.position) { 
        Toast("请填写地址")
      } else {
        const res = await fetch(API.getAffirmMeetOrder,{
          ...this.loginData[1],
          AppointmentOrderNo: this.$route.query.AppointmentOrderNo,
          Phone: this.setTing.phone,
          Location: this.setTing.position,
          SMeetUPTime: this.setTing.startTime,
          EMeetUPTime: this.setTing.endTime,
          Remark:this.setTing.desc,
        });
        history.back();
      }
      
    },
    //拒绝约见
    async reject(){
      const res = await fetch(API.getRejectMeetOrder,{
        ...this.loginData[0],
        ...this.loginData[1],
        AppointmentOrderNo: this.$route.query.AppointmentOrderNo,
      });
      Toast("您已拒绝成功");
      history.back();
    }, 
  },
  components: {
    myHeader,
    myProgress,
    myButton,
    myField,
    subject,
    myBigIcon,
    Popup,
    myField2,
    DatetimePicker
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  width: 3.75rem;
  height: 100%;
  overflow: scroll;
  .showno{
    display: none;
  }
  .black_bg{
    position: absolute;
    top: 0;
    left: 0;
    display: block !important;
    z-index: 2012;
    background: rgba(0, 0, 0, .3);
    height: 100%;
    width: 100%;
    .bg{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 2.7rem;
    }
    .call_0319{
      height: .49rem;
      line-height: .5rem;
      text-align: center;
      background: white;
      color: #555555;
      font-size: .2rem;
      border-top: .01rem solid #E5E5E5;
      position: fixed;
      bottom: 0;
      width: 100%;
    }
    .fieldWrap2{
      position: fixed;
      bottom: .5rem;
      z-index: 2013;
    }
  }
  .orderWrap{
    width: 100%;
    background: #fff;
    margin-bottom: .07rem;
    .orderContent{
      padding: .15rem .1rem;
      border-bottom: 1px solid #ddd;
      h2{
        color: #333;
        font-size: 0.16rem;
        margin-bottom: 0.12rem;
      }
      p{
        color: #B3B3B6;
        font-size: 0.14rem;
        margin-bottom: 0.12rem;
        &:nth-last-of-type(1){
          margin-bottom: 0;
        }
      }
    }
    .orderRemark{
      padding: .15rem .1rem;
      display: flex;
      font-size: .14rem;
      color: #B3B3B6;
      span{
        display: inline-block;
        width: .5rem;
        flex-shrink: 1;
      }
      p{
        line-height: 1.5;
        flex-shrink: 5;
      }
    }
  }
  main{
    padding-bottom: 0.22rem;
    .inputWrap {
      width: 3.75rem;
      .items_0314 {
        background: white;
        width: 100%;
        height: .44rem;
        padding: 0 .15rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: .01rem solid #E5E5E5;
        &:nth-last-of-type(1) {
          border:none;
        }
        .icons2_0314 {
          display: block;
          width: .2rem;
          height: .2rem;
          background: url('../assets/img/icon_shape@3x.png') center center;
          background-size: cover;
          background-repeat: no-repeat;
        }
        .noIcon2_0316 {
           background: none!important;
        }
        .itInput_0314 {
          width: 2.2rem;
          height: .43rem;
          line-height: .43rem;
          color: #B2B2B2;
          font-size: .17rem;
          border: none;
        }
        .itLabels_0314 {
          display: block;
          width: .9rem;
          height: .44rem;
          line-height: .44rem;
          font-size: .17rem;
          font-weight: 500;
          color: #000;
        }
      }
    }
    .marginB_10 {
      margin-bottom: .1rem;
    }
    .btnW_0331 {
      margin-bottom:.12rem;
    }
    .call_0319 {
      height: .58rem;
      line-height: .58rem;
      text-align: center;
      background: white;
      color: #555555;
      font-size: .2rem;
      border-top: .01rem solid #E5E5E5;
      &:nth-of-type(2) {
        margin-bottom: .25rem;
      }
      
    }
    .conten_0309 {
      height: .82rem;
      width: 100%;
      background: #FAFAFA;
      padding: .19rem 0 .11rem;
      box-sizing: border-box;
      margin-bottom: .1rem;
      p {
        text-align: center;
        &.p1_0309 {
          height: .13rem;
          line-height: .13rem;
          margin-bottom: .14rem;
          color: #555555;
          font-size: .16rem;

        }
        &.p2_0309 {
          height: .25rem;
          color: #39393D;
          font-size: .18rem;
          font-weight: bold;
        }
      }
    }
  }
}

</style>
